/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "components/token_input";
@import "components/token_selector";

.autocomplete_menu {
  ul {
    max-height: 218px;
    position: relative;
  }
  li, li.active.expanded {
    height: 32px;
    cursor: pointer;
    a.toggle, a.expand {
      position: relative;
      padding: 1px;
      background: transparent;
    }
    i {
      display: block;
      width: 30px;
      height: 30px;
    }
    a.expand {
      float: right;
      i {
        background: transparent url(/images/messages/expand-context.png) no-repeat 10px -23px;
      }
    }
    a.toggle {
      display: none;
      float: left;
      margin: 0 14px 0 6px;
      i {
        width: 16px;
        height: 16px;
        margin: 7px;
      }
    }
    .avatar {
      width: 32px;
      height: 32px;
      float: left;
      margin-right: 4px;
      margin-top: -2px;
    }
    .avatar-box {
      width: 32px;
      height: 32px;
      float: left;
      margin-right: 4px;
      background: transparent url(/images/messages/avatar-sprites.png) 0 0 no-repeat;
    }
    span.name, span.details {
      white-space: nowrap;
      overflow: hidden;
      display: block;
      line-height: 16px;
    }
    b {
      color: #000;
      text-shadow: none;
    }
    span.details, span.context_info {
      color: #2571bd;
      font-weight: bold;
      font-size: 0.8em;
    }
    span.details {
      display: block;
    }
    span.context_info {
      padding-left: 6px;
    }
  }
  li.toggleable a.toggle i {
    background: transparent url(/images/messages/checkbox-sprite.png) no-repeat 0 0;
  }
  li.context .avatar-box, li.context.active.expanded .avatar-box {
    background-position: 0 -64px;
  }
  li.user.active .avatar-box {
    background-position: 0 -32px;
  }
  li.context.active .avatar-box {
    background-position: 0 -96px;
  }
  li.active {
    a.expand {
      i {
        background-position: 10px 10px;
      }
    }
    a.expand:hover {
      padding: 0;
      border: 1px solid #2da5f0;
      background: #2da5f0 url(/images/messages/finder-active.png) repeat-x 0 0;
    }
    b {
      color: #fff;
      text-shadow: 0px 1px 1px #0587bb;
    }
    span {
      color: #e1edf0;
    }
    a.toggle i {
      background-position: 0 -48px;
    }
    .user.avatar-box {
      background-position: 0 -32px;
    }
    .context.avatar-box {
      background-position: 0 -96px;
    }
  }
  li.toggleable.on a.toggle i {
    background-position: 0 -32px;
  }
  li.toggleable.on.active a.toggle i {
    background-position: 0 -80px;
  }
  li.toggleable.on.active a.toggle:hover i {
    background-position: 0 -64px;
  }
  li.expanded, li.active.expanded {
    cursor: default;
    a.expand {
      i {
        background-position: 10px -55px;
      }
    }
    a.toggle {
      display: none !important;
    }
  }
  li.active.expanded {
    a.expand:hover {
      cursor: pointer;
      background: #fff;
      border-color: #e4ebef;
    }
  }
  div.with-toggles {
    a.toggle {
      display: block;
    }
    li.expanded, li.active.expanded {
      padding-left: 11px;
      .avatar-box {
        margin: 0 14px 0 0;
      }
    }
  }
}
